<template>
  <div class="dashboardBeOverdue">
    <div class="add_btn_top">
      <el-button @click="handAdd" type="primary" icon="el-icon-plus" size="mini"
        >添加</el-button
      >
      <div style="margin: 0 10px" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch v-model="screen" class="screenSwitch" active-color="#2680D2" />
    </div>
    <div>
      <el-container>
        <el-main style="background-color: #fff;">
          <el-table
            :span-method="handleObjectSpanMethod"
            border
            height="100px"
            v-adaptive
            :data="tableData"
            style="width: 100%"
            size="small"
          >
            <el-table-column label="设备名称" prop="deviceName" align="center">
            </el-table-column>
            <el-table-column label="设备编号" prop="deviceToken" align="center">
            </el-table-column>

            <el-table-column label="是否到期" prop="isToDate" align="center">
              <template slot-scope="scoped">
                <!-- effect="dark"  -->
                <el-tag type="success" v-if="scoped.row.isToDate == '否'"
                  >否</el-tag
                >
                <el-tag type="danger" v-else>是</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="仪表名称" prop="meterName" align="center">
            </el-table-column>
            <el-table-column label="仪表编号" prop="meterId" align="center">
            </el-table-column>
            <el-table-column label="到期日期" prop="toDate" align="center">
            </el-table-column>

            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scoped">
                <span
                  style="color: #2680d2; font-size: 16px; margin-right: 10px"
                  class="el-icon-edit-outline"
                  @click="handEdit(scoped.row)"
                ></span>
                <span
                  style="color: #2680d2; font-size: 16px"
                  class="el-icon-delete"
                  @click="handDel(scoped.row.token)"
                ></span>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-aside
          v-show="screen"
          style="background: #fff; padding: 10px; margin-left: 10px"
          width="18%"
        >
          <Search :deviceList="deviceList" @setFilterList="setFilterList" />
        </el-aside>
      </el-container>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
      <Dialog
        @closeDialog="handleClose"
        :deviceList="deviceList"
        ref="dialog"
        :showDialog.sync="showDialog"
      ></Dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import _ from "lodash";
import Dialog from "./components/Dialog.vue";
import { getDevicesV2 } from "@/api/device";
import { getMeterManage, delMeterManage } from "@/api/meterManage";
import { paginationMixins } from "@/mixin/pagination";
import { generateId } from "@/utils";
import Search from "./components/searchFilter";
export default {
  mixins: [paginationMixins],
  components: {
    Pagination,
    Dialog,
    Search
  },
  data() {
    return {
      tableData: [],
      showDialog: false,
      deviceList: [],
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      searchParams: {},
      spanData: [],
      pos: 0
    };
  },
  mounted() {
    // generateHarf();
    this.init();
    getDevicesV2().then(res => {
      const results = res.data.results.map(item => {
        return {
          ...item.idevice
        };
      });
      this.deviceList = results;
    });
  },
  methods: {
    // 计算需要合并的单元格
    getSpanData(data) {
      // 存放计算好的合并单元格的规则
      this.spanData = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanData.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (
            data[i].deviceName === data[i - 1].deviceName ||
            data[i].deviceToken === data[i - 1].deviceToken
          ) {
            this.spanData[this.pos] += 1;
            this.spanData.push(0);
          } else {
            this.spanData.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 合并单元格
    handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 需要合并的列
      // [0, 1, 2].includes(columnIndex ), 表示合并前三列
      if (columnIndex === 1 || columnIndex === 0) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      this.searchParams = data;
      this.init();
    },
    handleClose(isRefresh) {
      if (isRefresh) {
        this.init();
      }
    },
    handAdd() {
      this.showDialog = true;
    },
    handEdit(row) {
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs.dialog.form = _.cloneDeep({
          ...row,
          meterList: [
            {
              meterName: row.meterName,
              meterId: row.meterId,
              id: generateId()
            }
          ]
        });
        console.log("row :>> ", this.$refs.dialog.form);
      });
    },
    handDel(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delMeterManage(token).then(res => {
          this.$msg({
            type: "success",
            message: "删除成功!"
          });
          this.init();
        });
      });
    },
    async init(token) {
      const res = await getMeterManage({
        page: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      });
      const results = res.data.results;
      // 排序相同的相邻,后续处理合并单元格
      const arr = results.sort((a, b) => {
        if (a.deviceName < b.deviceName) return -1;
        if (a.deviceName > b.deviceName) return 1;
        return 0;
      });
      this.tableData = arr;
      this.total = res.data.numResults;
      // 对表格数据进行处理，找出需要合并的单元格
      this.getSpanData(this.tableData);
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboardBeOverdue {
}
</style>
